<template>
	<div>
		<div class="top">
			<div class="left" @click="back()">×</div>
			<div class="rig">账户注册</div>
			<div class="left"></div>
		</div>
		<div class="main">
			<div class="two">
				<span>用户名</span>
				<input
					v-model="username"
					type="text"
					name="username"
					id=""
					placeholder="请输入您的昵称"
				/>
			</div>
			<div class="two">
				<span>电话号码</span>
				<input
					v-model="phone"
					type="text"
					name="phone"
					id=""
					placeholder="请输入您的电话号码"
				/>
			</div>
			<button @click="add()" class="yzm">验证码</button>
			<div class="one">
				<span>验证码</span>
				<input
					v-model="user_code"
					type="text"
					name="user_code"
					id=""
					placeholder="请输入您的验证码"
				/>
			</div>
			<div class="two">
				<span>密码</span>
				<input
					v-model="password1"
					type="password"
					name="password1"
					id=""
					placeholder="请输入密码"
				/>
			</div>
			<div class="two">
				<span>密码</span>
				<input
					v-model="password2"
					type="password"
					name="password2"
					id=""
					placeholder="请再次输入密码"
				/>
			</div>
			<div class="three">
				<button ref="login" @click="fun()" :disabled="!bool">注册</button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getlink } from "@/api/getapi.js";
	import { postlink } from "@/api/postapi.js";
	export default {
		methods: {
			back() {
				this.$router.go(-1);
			},
			go() {
				if (this.bool) {
					this.$router.push("/regist");
				}
			},
			fun() {
				let usp = new URLSearchParams();
				usp.append("username", this.username);
				usp.append("password1", this.password1);
				usp.append("password2", this.password2);
				usp.append("phone", this.phone);
				usp.append("user_code", this.user_code);
				postlink("http://1.116.51.111:8000/login/regist/", usp)
					.then((ok) => {
						console.log(ok);
						if (ok.data.msg == "注册成功") {
							alert("注册成功");
							// 登录成功
							this.$router.push("/login");
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			add() {
				console.log(this.phone);
				let usp = new URLSearchParams();
				usp.append("phone", this.phone);
				getlink("http://1.116.51.111:8000/login/code/", usp)
					.then((ok) => {
						console.log(ok);
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
		data() {
			return {
				username: "",
				password1: "",
				password2: "",
				phone: "",
				user_code: "",
				bool:false
			};
		},
		watch: {
			username() {
				if (this.username && this.password1&& this.password2&& this.phone&& this.user_code) {
					this.$refs.login.style.backgroundColor = "orange";
					this.bool=true
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";
					this.bool=false
				}
			},
			password1() {
				if (this.username && this.password1&& this.password2&& this.phone&& this.user_code&&this.password2==this.password1) {
					this.$refs.login.style.backgroundColor = "orange";this.bool=true
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";this.bool=false
				}
			},
			password2() {
				if (this.username && this.password1&& this.password2&& this.phone&& this.user_code&&this.password2==this.password1) {
					this.$refs.login.style.backgroundColor = "orange";this.bool=true
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";this.bool=false;
				}
			},
			phone() {
				if (this.username && this.password1&& this.password2&& this.phone&& this.user_code) {
					this.$refs.login.style.backgroundColor = "orange";this.bool=true
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";this.bool=false
				}
			},
			user_code() {
				if (this.username && this.password1&& this.password2&& this.phone&& this.user_code) {
					this.$refs.login.style.backgroundColor = "orange";this.bool=true
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";this.bool=false
				}
			},
			
		},
	};
</script>

<style scoped>
	div {
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		height: 0.2rem;
		font-size: 0.11rem;
		display: flex;
		justify-content: space-between;
		line-height: 0.2rem;
		padding: 0.2rem 0.3rem;
	}
	.main {
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: #999;
	}
	.main .one,
	.main .two,
	.main .three {
		border-bottom: 1px solid #ccc;
		display: flex;
		padding: 0.2rem 0;
	}
	.main .one span,
	.main .two span {
		width: 0.6rem;
	}
	.main .one input,
	.main .two input {
		flex: 1;
		border: none;
	}
	.main .three {
		height: 0.8rem;
		width: 100%;
		border: none;
	}
	.main .three button {
		width: 100%;
		height: 100%;
		color: #fff;
		border: none;
		border-radius: 0.05rem;
		background: #ccc;
	}
	.yzm {
		width: 100%;
		height: 0.3rem;
	}
	.one {
		line-height: 0.3rem;
	}
</style>